import { Card } from 'antd';
import DraftItemLink from './DraftItemLink';
import isEqual from 'lodash/isEqual';

class DraftItem extends React.Component {

    shouldComponentUpdate(nextProps) {
		const _c = !isEqual(mobx.toJS(this.props.types), mobx.toJS(nextProps.types));
		const _g = !isEqual(mobx.toJS(this.props.groups), mobx.toJS(nextProps.groups));
        return _c || _g ||this.props.isAbc !== nextProps.isAbc||this.props.actions!==nextProps.actions;
    }

    render() {
        const {types,isAbc,actions,groups} = this.props;
        return (
            <div>
			{
           		types.map((type)=>{
           			const {wfbeans,img,color,letter,selected,typeName} = type;
					const icontype ="icon-base " +img;
					return (
						<Card id={letter} style={selected ? {"border-top-color":color,background:'#fff',boxShadow:'0 1px 6px hsla(0,0%,39%,.2)'} : {"border-top-color":color}}>
				 			<div style={{padding:'5px 0 25px 0',textAlign:'center'}}>
								{isAbc ?
									<span style={{fontSize:26,color:color}}>{letter}</span>
									:
									<div className="wf-card-type-name">
										<span style={{color:color,fontSize:26,marginRight:10}}><i className={icontype}/></span>
										<span style={{height:36,lineHeight:'36px'}}>{typeName}{wfbeans && ('(' + wfbeans.length + ')')}</span>
									</div>
								}
							</div>
							{
								wfbeans.map((obj)=><DraftItemLink wfbean={obj} actions={actions} groups={groups}/>)
							}
						</Card>
					)
           		})
            }
			</div>
        );
    };

}

export default DraftItem;